<template>
  <el-dialog :visible.sync="show" width="550px" :close-on-click-modal="false" title="注册用户" center>
    <!-- <template slot="header">
        <el-row class="center_x ma_1">
          <strong>注册用户</strong>
        </el-row>
    </template>-->
    <!-- <el-divider></el-divider> -->
    <el-card>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="userType">
          <div class="center_x">
            <div class="fill_x_2">
              <span>用户类别</span>
            </div>
            <div class="fill_x_8">
              <el-select v-model="form.userType" placeholder="请选择用户类别" style="width:100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="userName">
          <div class="center_x">
            <div class="fill_x_2">
              <span>用户名</span>
            </div>
            <div class="fill_x_8">
              <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="pwd">
          <div class="center_x">
            <div class="fill_x_2">
              <span>密码</span>
            </div>
            <div class="fill_x_8">
              <el-input placeholder="请输入用户密码" v-model="form.pwd" show-password></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="confirmPwd">
          <div class="center_x">
            <div class="fill_x_2">
              <span>确认密码</span>
            </div>
            <div class="fill_x_8">
              <el-input placeholder="请确认密码" v-model="form.confirmPwd" show-password></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="actureName">
          <div class="center_x">
            <div class="fill_x_2">
              <span>真实姓名</span>
            </div>
            <div class="fill_x_8">
              <el-input placeholder="请输入姓名" v-model="form.actureName"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="organization">
          <div class="center_x">
            <div class="fill_x_2">
              <span>学校/单位</span>
            </div>
            <div class="fill_x_8">
              <el-input placeholder="请输入学校/单位名称" v-model="form.organization"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="area">
          <div class="center_x">
            <div class="fill_x_2">
              <span>地区</span>
            </div>
            <div class="fill_x_8">
              <area-select :data="pca" type="text" v-model="form.area" style="line-height: 1.4;"></area-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="email">
          <div class="center_x">
            <div class="fill_x_2">
              <span>邮箱</span>
            </div>
            <div class="fill_x_8">
              <el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="checkCode">
          <div class="center_x">
            <div class="fill_x_2">
              <span>验证码</span>
            </div>
            <div class="fill_x_8 flex_item">
              <el-input placeholder="请输入验证码" v-model="form.checkCode"></el-input>
              <el-button
                type="primary"
                :disabled="unSend || coudSendCode()"
                @click="sendCheckCode"
                style="margin-left: 10px"
              >
                <label v-if="time!=0">{{time}}s</label>
                <label v-else>发送</label>
              </el-button>
            </div>
          </div>
        </el-form-item>
        <el-row class="ma_1 center_x">
          <el-button
            type="primary"
            @click="submitForm()"
            style="width: 250px;"
            :disabled="coudSendCode()||form.checkCode===''"
          >注册</el-button>
        </el-row>
      </el-form>
    </el-card>
  </el-dialog>
</template>

<script>
import UApi from "../../api/UserApi.js";
import { pca } from "area-data";
export default {
  props: {
    visible: Boolean
  },
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("姓名不能为空"));
      }
    };
    var checkPwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
    };
    var checkCofirm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var checkOga = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入组织名称"));
      }
    };
    var checkActureName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("真实姓名不能为空"));
      }
    };
    var checkUserType = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请选择用户类别"));
      }
    };
    var checkEmail = (rule, value, callback) => {
      var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
      //规则需要修改
      if (value === "") {
        return callback(new Error("邮箱不能为空"));
      } else if (!reg.test(value)) {
        return callback(new Error("邮箱格式不正确"));
      }
    };
    var checkArea = (rule, value, callback) => {
      if (value.length === 0) {
        return callback(new Error("请选择地区"));
      }
    };
    var checkCode = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入验证码"));
      }
    };
    return {
      options: [
        {
          label: "教师",
          value: 2
        },
        {
          label: "高校学生",
          value: 4
        },
        {
          label: "高职学生",
          value: 5
        },
        {
          label: "中小学生",
          value: 6
        },
        {
          label: "企业培训用户",
          value: 7
        }
      ],
      show: this.visible,
      form: {
        userName: "",
        actureName: "",
        userType: 4,
        pwd: "",
        confirmPwd: "",
        organization: "",
        email: "",
        checkCode: "",
        area: []
      },
      rules: {
        userName: [{ validator: checkName, trigger: "blur" }],
        pwd: [{ validator: checkPwd, trigger: "blur" }],
        confirmPwd: [{ validator: checkCofirm, trigger: "blur" }],
        actureName: [{ validator: checkActureName, trigger: "blur" }],
        organization: [{ validator: checkOga, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        checkCode: [{ validator: checkCode, trigger: "blur" }],
        area: [{ validator: checkArea, trigger: "blur" }],
        userType: [{ validator: checkUserType, trigger: "blur" }]
      },
      pca: pca,
      userTypeError: false,
      areaError: false,
      time: 0,
      unSend: false
    };
  },
  watch: {
    visible: function(val) {
      this.show = val;
    },
    show: function(val) {
      if (val == false) {
        this.resetForm("form");
        this.form.area = [];
      }
      this.$emit("update:visible", val);
    },
    "form.userType": function(val) {
      if (val) {
        this.$refs.form.clearValidate("userType");
      }
    },
    "form.area": function(val) {
      if (val) {
        this.$refs.form.clearValidate("area");
      }
    }
  },
  methods: {
    loadPayload() {
      return {
        username: this.form.actureName,
        loginName: this.form.userName,
        password: this.form.pwd,
        email: this.form.email,
        roleId: this.form.userType,
        province: this.form.area[0],
        city: this.form.area[1],
        checkCode: this.form.checkCode,
        school: this.form.organization
      };
    },
    submitForm() {
      this.registor();
    },
    coudSendCode() {
      return (
        this.form.actureName === "" ||
        this.form.userName === "" ||
        this.form.pwd === "" ||
        !/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(
          this.form.email
        ) ||
        this.form.confirmPwd === "" ||
        this.form.area === [] ||
        this.form.confirmPwd !== this.form.pwd
      );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    sendCheckCode() {
      this.time = 60;
      this.unSend = true;
      this.limtTime();
      this.axios
        .get(UApi.checkCode, { params: { email: this.form.email } })
        .then(() => {
          this.$message({
            showClose: true,
            message: "验证码发送成功",
            type: "success"
          });
        });
    },
    limtTime() {
      var h = window.setInterval(() => {
        this.time--;
        if (this.time === 0) {
          window.clearInterval(h);
          this.unSend = false;
        }
      }, 1000);
    },
    registor() {
      this.axios.post(UApi.registe, this.loadPayload()).then(res => {
        if (res.data.status === 0) {
          this.$message({
            showClose: true,
            message: "注册成功",
            type: "success"
          });
          this.show = false;
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style>
</style>
